<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            margin:0;
            padding:0;
            background:#c1c1c1;
        }

        .container{
            max-width:1200px;
            margin: 60px auto 0;
            display: flex;
            text-align:center;
            justify-content: center;
            flex-wrap:wrap;
        }
        .col{
            flex:25%;
            padding:10px;
            min-width:280px;
            max-width:320px;
            box-sizing:border-box;
        }
        .table{
            background:#fff;
            padding:40px 20px;
            position:relative;
            overflow: hidden;
            font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            box-shadow: 0 0 10px #00000070;
        }
        .table h3{
            text-transform: Uppercase;
            font-size:150%;
        }
        .table span{
            display: block;
            font-size:40px;
        }
        .table p{
            margin:0;
            font-size:14px;
            margin-bottom:30px;
        }
        .table ul{
            list-style: none;
            margin:0;
            padding:0;
        }
        .table ul li{
            padding:10px 0;
        }
        .table a{
            display: block;
            text-decoration:none;
            color:#000;
            padding:10px 0;
            margin:10px auto;
            text-transform: uppercase;
            border-radius:100px;
            border:3px solid #000;
            transition:.5s;
        }
        .table a:hover{
            background:#00d8d6;
            color:#fff;
            border:3px solid #00d8d6;
        }
        .pop,.sold{
            position:absolute;
            top:15px;
            right:-35px;
            transform:rotate(45deg);
            font-size:16px;
            padding:10px 40px;
            color:#fff;
        }
        .pop{
            background:red;
        }
        .sold{
            background:gray;
        }
        @media screen and (max-width:980px){
            .col{
                flex:50%;
            }
        }
        @media screen and (max-width:700px){
            .col{
                flex:100%;
            }    
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="col">
            <div class="table">
                <h3>regular</h3>
                <span>$10</span>
                <p>Per Month</p>
                <ul>
                    <li><strong>2</strong> WebSites</li>
                    <li><strong>10</strong> Emails</li>
                    <li><strong>100 GB</strong> Storage</li>
                    <li><strong>1</strong> Account</li>
                </ul>
                <a href="#">buy now</a>
            </div>
        </div>
        <div class="col">
            <div class="table">
                <h3>pro pack</h3>
                <span>$15</span>
                <p>Per Month</p>
                <div class="pop">Popular</div>
                 <ul>
                    <li><strong>3</strong>WebSites</li>
                    <li><strong>15</strong>Emails</li>
                    <li><strong>200GB</strong>Storage</li>
                    <li><strong>1</strong>Account</li>
                </ul>
                <a href="#">buy now</a>
            </div>
        </div>
        <div class="col">
            <div class="table">
                <h3>premium</h3>
                <span>$20</span>
                <p>Per Month</p>
                <ul>
                    <li><strong>4</strong>WebSites</li>
                    <li><strong>20</strong>Emails</li>
                    <li><strong>300GB</strong>Storage</li>
                    <li><strong>2</strong>Account</li>
                </ul>
                <a href="#">buy now</a>
            </div>
        </div>
        <div class="col">
            <div class="table">
                <div class="sold">Sold Out</div>
                <h3>ultimate</h3>
                <span>$25</span>
                <p>Per Month</p>
                <ul>
                    <li><strong>6</strong>WebSites</li>
                    <li><strong>25</strong>Emails</li>
                    <li><strong>500GB</strong>Storage</li>
                    <li><strong>3</strong>Account</li>
                </ul>
                <a href="#">buy now</a>
            </div>
        </div>
    </div>
</body>
</html>